{% extends "recursosHumanos/index.html" %}
{% load i18n %}
{% block title %}{% trans 'Recursos Humanos - Contratos'%}{% endblock %}

{% block breadcrumb %}
<ul class="breadcrumb">
	<li>
		<span class="glyphicon glyphicon-home"></span> <a tabindex="2" href="{% url homeRecursosHumanos %}" title="{% trans 'Home' %}">{% trans 'Home' %}</a>
	</li>
	<li class="active">{% trans 'Listar Contratos' %}</li>
</ul>
{% endblock %}

<!-- Estes blocos é para alterar a classe do menu do index, refere se está ou não activo -->
{% block MenuDocente %}active{% endblock %}
{% block MenuInformacao %} {% endblock %}

{% block filtros %}
<div class="list-group">
  <a href="#" class="list-group-item active">
    Departamento
  </a>
  {% include "recursosHumanos/elements/filter_dep.html" %}
  
  <a href="#" class="list-group-item active">Categoria</a>
  {% include "recursosHumanos/elements/filter_cat.html" %}
  {% include "recursosHumanos/elements/filter_start_date.html" %}
  {% include "recursosHumanos/elements/filter_end_date.html" %}
</div>

<!--<ul>

	<li class='title'>
		<span>Filtros</span>
	</li>
	<li class="has-sub" >
		<a  id="oa_button" tabindex="4" href='#oa'><span>Por Ordem Alfabética</span></a>

	</li>
	<div id="oa">

	</div>

	<li class="has-sub">
		<a id="da_button" tabindex="4" href='#dep'><span>Por Departamento</span></a>

	</li>
	<div id="dep">

	</div>
	<li class="has-sub">
		<a id="ca_button" tabindex="4" href='#category'><span>Por Categoria</span></a>

	</li>
	<div id="category">

	</div>
	<li class="has-sub">
		<a id="date_button" tabindex="4" href='#date'><span>Por Data</span></a>

	</li>
	<div id="date">

		<li class="has-sub">
			<a class="date" id="start_date_button" tabindex="4" href='#date'><span>Por Data Ínicio</span></a>

		</li>
		<!--Por data de inicio----------------------------->

		<!--<div  id="start_date">

			<form id="form_start_date" accept-charset="utf-8">

				<table>
				
					<tr>
						<td colspan="4" id="contStart"></td>
					</tr>
					<tr>
						<td>
						<input class="fieldData" style="text-align: center" readonly="readonly" name="date" id="start_date_field" size="14" />
						</td>

					</tr>
				</table>

				<script type="text/javascript">
					//<![CDATA[
					// this handler is designed to work both for onSelect and onTimeChange
					// events.  It updates the input fields according to what's selected in
					// the calendar.
					function updateFields(cal) {
					var date=cal.selection.get();
					if(date) {
					date=Calendar.intToDate(date);
					document.getElementById("start_date_field").value=Calendar.printDate(date,"%d-%m-%Y");
					}
					};
					Calendar.setup({
					cont:"contStart",onSelect:updateFields
					});
					//]]>
				</script>
	
			<span>No raio de </span>
			<input name="number_increment" id="number_increment" type="number" min="1" value="1" />
			<span>dias </span>
		

		<p>
			<input  class="submitDate" name="data_inicio" id="submitStartDate" type="submit" value="Filtrar"/>
		</p>
		</form>

	</div>

	<li class="has-sub">
		<a class="date"  id="end_date_button" tabindex="4" href='#date'><span>Por Data Fim</span></a>

	</li>
	<div id="end_date">
<form id="form_end_date" accept-charset="utf-8">

				<table>
					
					<tr>
						<td colspan="4" id="contEnd"></td>
					</tr>
					<tr>
						<td>
						<input class="fieldData" style="text-align: center" readonly="readonly" name="date" id="end_date_field" size="14" />
						</td>

					</tr>
				</table>

				<script type="text/javascript">
					//<![CDATA[
					// this handler is designed to work both for onSelect and onTimeChange
					// events.  It updates the input fields according to what's selected in
					// the calendar.
					function updateFields(cal) {
					var date=cal.selection.get();
					if(date) {
					date=Calendar.intToDate(date);
					document.getElementById("end_date_field").value=Calendar.printDate(date,"%d-%m-%Y");
					}
					};
					Calendar.setup({
					cont:"contEnd",onSelect:updateFields
					});
					//]]>
				</script>
	
			<span>No raio de </span>
			<input name="number_increment" id="number_increment" type="number" min="1" value="1" />
			<span>dias </span>
		

		<p>
			<input class="submitDate" name="data_fim" id="submitEndDate" type="submit" value="Filtrar"/>
		</p>
		</form>

	</div>

	</div>
</ul>-->

{% endblock %}

{% block content %}
<div class="page-header whiteText">
  <h1>{% trans 'Listar Contratos'%}</h1>
</div>


<table class="table table-striped table-hover" id="special_table">
	<thead>
	<tr>
		<th>Docente</th>
		<th>Categoria</th>
		<th>Escalão</th>
		<th>Tipo Contrato</th>
		<th>Percentagem</th>
		<th>Data Inicio</th>
		<th>Data Fim</th>
	</tr>
	</thead>
	<tbody>
		{% for nome, nomeCategoria, escalao, id_Docente, contract_type, percentagem, start_contract, end_contract in docentes %}
			<tr>
				<td class="teacher_name_field"><a href="{{id_Docente}}">{{nome}}</a></td>
				<td>{{nomeCategoria}}</td>
				<td>{{escalao}}</td>
				<td>{{contract_type}}</td>
				<td>{{percentagem}}</td>
				<td>{{start_contract}}</td>
				<td>{{end_contract}}</td>
			</tr>
		{% endfor %}
</tbody>
</table>
<!--PAGINAÇÂO -->
<div>
	<ul class="pagination">
		<li><a href="?show=all">Todos</a></li>
	</ul>
</div>
<script type="text/javascript">

	$('#special_table').dataTable({
		"oLanguage": {
            "sUrl": "/static/dataTables/lang/pt-pt.txt"
        },
         "sPaginationType": "full_numbers",
         "sDom": '<"dataTables_special_bar"l><"dataTables_special_bar"if><"whiteBox"rt><"pagination_box"p>'
        
        	
	});
	//$('.hasTooltip').tooltip({"container": false});
	

</script>
<script src="/static/javaScript/recursosHumanos_contratos.js"></script>


<!--<script type="text/javascript">document.getElementById("searchField").focus();
	filter_oa();
	filter_dep();
	filter_cat();
	filter_date();
	date_function();
	
</script>-->



{% endblock %}

